<template>
  <el-form ref="fileForm" :model="formData" label-width="130px">
    <el-row>
      <template v-for="(item, index) in columnsData">
        <el-col :span="8" :key="index">
          <el-form-item :label="item.label">
            <!-- 输入框 -->
            <el-input
              v-if="item.type === 'Input'"
              v-model="formData[item.prop]"
              :style="{ width: '100%' }"
              :readonly="true"
            ></el-input>
            <el-select
              v-if="item.type === 'Select'"
              v-model="formData[item.prop]"
              :disabled="true"
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="op in item.options"
                :key="op.value"
                :label="op.label"
                :value="op.value"
              />
            </el-select>
            <el-date-picker
              v-if="item.type === 'data'"
              v-model="formData[item.prop]"
              :readonly="true"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              type="date"
              :style="{ width: '100%' }"
              placeholder="选择日期"
            />
          </el-form-item>
        </el-col>
      </template>
    </el-row>
  </el-form>
</template>
<script>
export default {
  name: "file-form",
  data() {
    return {}
  },
  props: {
    formData: {
      type: Object,
      default: () => ({})
    },
    columnsData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.el-row {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 20px;
}
</style>
